<template>
    <el-row>
          <el-col :span="5" >
              <catalogTree @nodeClick="catalogTreeSelect" />
          </el-col>
          <el-col :span="19">
                <div class="panelBox">
                    <div class="filter-container">
                        <el-input v-model="listQuery.key" placeholder="模型key" style="width: 200px;" class="filter-item"
                                @keyup.enter.native="btnQuery"/>
                        <el-input v-model="listQuery.name" placeholder="模型名称" style="width: 200px;" class="filter-item"
                                @keyup.enter.native="btnQuery"/>
                        <el-dropdown split-button type="primary" @click="btnQuery" class="filter-item">
                            <i class="el-icon-search el-icon--left"></i>查询
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item icon="el-icon-zoom-out" @click.native="btnReset">重置</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                        <el-button-group>
                            <el-button v-permission="'flowable:model:save'" icon="el-icon-plus" type="primary" @click="btnCreate"
                                    class="filter-item">新增
                            </el-button>
                            <el-button v-permission="'flowable:model:delete'" icon="el-icon-delete" @click="btnDelete()"
                                    class="filter-item">批量删除
                            </el-button>
                        </el-button-group>
                    </div>
                    <el-table
                            :data="records"
                            ref="multipleTable"
                            @selection-change="selectionChange"
                            border
                            fit
                            highlight-current-row
                            style="width: 100%;"
                            :cell-style="{padding:'3px'}"
                    >
                        <el-table-column type="selection" align="center">
                        </el-table-column>
                        <el-table-column label="模型key" prop="key" align="center">
                            <template slot-scope="scope"><span>{{ scope.row.key }}</span></template>
                        </el-table-column>
                        <el-table-column label="模型名称" prop="name" align="center">
                            <template slot-scope="scope"><span>{{ scope.row.name }}</span></template>
                        </el-table-column>
                        <!-- <el-table-column label="模型分类" prop="category" align="center">
                            <template slot-scope="scope"><span>{{ scope.row.category }}</span></template>
                        </el-table-column> -->
                        <el-table-column label="版本" prop="version" align="center">
                            <template slot-scope="scope"><span>{{ scope.row.version }}</span></template>
                        </el-table-column>
                        <el-table-column label="是否发布" prop="deployed" align="center">
                            <template slot-scope="scope"><span>{{ scope.row.deployed?'是':'否' }}</span></template>
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="{row}">
                                <el-dropdown>
                                    <span class="el-dropdown-link">操作<i class="el-icon-arrow-down el-icon--right"></i></span>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item icon="el-icon-view" @click.native="btnView(row)">查看</el-dropdown-item>
                                        <el-dropdown-item v-permission="'flowable:model:update'" icon="el-icon-edit" divided
                                                        @click.native="btnUpdate(row)">修改
                                        </el-dropdown-item>
                                        <el-dropdown-item v-permission="'flowable:model:update'" icon="el-icon-edit" divided
                                                        @click.native="btnUpdateModel(row)">修改模型
                                        </el-dropdown-item>
                                        <el-dropdown-item v-permission="'flowable:model:delete'" icon="el-icon-delete" divided
                                                        @click.native="btnDelete(row.id)">删除
                                        </el-dropdown-item>
                                        <el-dropdown-item v-permission="'flowable:model:deploy'" icon="el-icon-edit" divided
                                                        @click.native="btnDeploy(row.id)">部署
                                        </el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </template>
                        </el-table-column>
                    </el-table>
                    <pagination v-show="total>0" :total="total" :current.sync="listQuery.current" :size.sync="listQuery.size"
                                @pagination="list"/>
                    
                    <el-dialog title="流程模型" :visible.sync="dialogFormVisible">
                        <avue-form ref="form" v-model="form" :option="option" >
                            
                        </avue-form>
                        <!-- <el-form ref="dataForm" :rules="rules" :model="temp" :disabled="dialogStatus==='view'"
                                label-position="right" label-width="110px">
                            <el-form-item label="模型key" prop="key">
                                <el-input v-model="temp.key" :readonly="dialogStatus==='update'"/>
                            </el-form-item>
                            <el-form-item label="模型名称" prop="name">
                                <el-input v-model="temp.name"/>
                            </el-form-item>
                            <el-form-item label="模型分类" prop="category">
                               
                                 <input-tree :data="treedata"
                                 v-model="category"
                                    :defaultProps="defaultProps" :multiple="false"
                                    :nodeKey="nodeKey" :checkedKeys="defaultCheckedKeys"
                                    @popoverHide="popoverHide"></input-tree>

                                <el-form-item label="下拉树选择器">
                                    <el-select v-model="mineStatus" placeholder="请选择" multiple collapse-tags>
                                        <el-option :value="mineStatus" style="height: auto">
                                            <el-tree 
                                                :data="treedata" 
                                                node-key="id"
                                                ref="tree" 
                                                highlight-current 
                                                :props="defaultProps"
                                                @node-click="handleCheckChange"
                                                ></el-tree>
                                            </el-option>
                                        </el-select>
                                </el-form-item> 
                            </el-form-item>
                            <el-form-item label="模型描述" prop="description">
                                <el-input v-model="temp.description"/>
                            </el-form-item>
                            <el-form-item label="租户ID" prop="tenantId">
                                <el-input v-model="temp.tenantId"/>
                            </el-form-item>
                        </el-form>-->
                        <div slot="footer" class="dialog-footer">
                            <el-button icon="el-icon-close" @click="dialogFormVisible = false">取消</el-button>
                            <el-button v-if="dialogStatus!=='view'" icon="el-icon-check" type="primary"
                                    @click="dialogStatus==='create'?createData():updateData()">确定
                            </el-button>
                        </div>
                    </el-dialog>
                </div>
        </el-col>
     </el-row>
</template>

<script>
    import Pagination from '@/components/Pagination'
    import {getAction, putAction, postAction, deleteAction} from '@/api/manage'
    import {Message} from 'element-ui'
    import catalogTree from "@/components/catalogTree"
    import inputTree from "@/components/inputTree"
    export default {
        name: 'FlowableModel',
        components: {Pagination, catalogTree, inputTree},
        data() {
            return {
                treedata: [],
                defaultProps: {
                    label: "label",
                    value:'id'
                },
                nodeKey: 'menuId',
                defaultCheckedKeys: [],
                dicts: [],
                records: null,
                selectedRecords: [],
                total: 0,
                form:{},
                option: {
                    menuBtn:false,
                    column: [
                        {
                            label: "模型key",
                            prop: "key",
                            rules: [
                                {
                                required: true,
                                message: "请输入模型key",
                                trigger: "blur"
                                }
                            ]
                        },
                        {
                            label: "模型名称",
                            prop: "name",
                            rules: [
                                {
                                required: true,
                                message: "请输入模型名称",
                                trigger: "blur"
                                }
                            ]
                        },
                        {
                            label: "模型分类",
                            prop: "category",
                            type: "tree",
                            dicUrl: "/api/sdt-flow/flowable/category/tree?parentId=0",
                            hide: true,
                            props: {
                                label: "label",
                                value:'id'
                            },
                            rules: [
                                {
                                required: false,
                                message: "请选择上级菜单",
                                trigger: "click"
                                }
                            ]
                        },
                        {
                            label: "模型描述",
                            prop: "description",
                        },
                        {
                            label: "租户ID",
                            prop: "tenantId",
                            type:'select',
                            dicData:[]
                        }, 
                    
                     
                    ]
                    },
                listQuery: {
                    current: 1,
                    size: 10,
                    key: undefined,
                    name: undefined,
                    modelCategory:undefined
                },
                dialogFormVisible: false,
                dialogStatus: '',
                temp: {
                    id: undefined,
                    key: '',
                    name: '',
                    category: '',
                    description: '',
                    tenantId: ''
                },
                rules: {
                    id: [{required: true, message: '该项不能为空', trigger: 'change'}],
                    key: [{required: true, message: '该项不能为空', trigger: 'change'}],
                    name: [{required: true, message: '该项不能为空', trigger: 'change'}]
                },
                curCategory:''
            }
        },
        beforeCreate() {

        },
        created() {
            this.list()
            this.getCatalogTree()
            this.initTenantList()
        },
        methods: {
            list() {
                getAction('/api/sdt-flow/flowable/model/list', this.listQuery).then(res => {
                    const {data} = res.data
                    this.records = data.records;
                    this.total = data.total
                })
            },
            getCatalogTree(){
                getAction('/api/sdt-flow/flowable/category/tree?parentId=0').then(res => {
                      this.treedata = res.data.data
                })
            },
            initTenantList(){
                getAction('/api/blade-system/tenant/list?current=1&size=1000').then(res => {
                      let data = res.data.data.records.map(ele => {
                          return {
                              value:ele.tenantId,
                              label:ele.tenantName
                          }
                      })
                      //tenantId: "000000",tenantName: "创维数字"
                      this.option.column.forEach(item => {
                           if(item.prop == 'tenantId'){
                               item.dicData = data
                           }
                      })
                      //debugger
                })
            },
            btnQuery() {
                this.listQuery.current = 1
                this.list()
            },
            btnReset() {
                this.listQuery = {
                    current: 1,
                    size: 10,
                    key: undefined,
                    name: undefined
                }
                this.list()
            },
            resetTemp() {
                this.temp = this.form = {
                    id: undefined,
                    key: '',
                    name: '',
                    category: '',
                    description: '',
                    tenantId: ''
                }
            },
            btnView(row) {
                this.temp = this.form = Object.assign({}, row)
                this.dialogStatus = 'view'
                this.dialogFormVisible = true
                this.$nextTick(() => {
                    this.$refs['dataForm'].clearValidate()
                })
            },
            btnCreate() {
                this.resetTemp()
                if(!this.curCategory){
                    this.$message.error('请选择流程分类')
                    return
                }else{
                    this.temp.category = this.listQuery.modelCategory
                }
             
                this.dialogStatus = 'create'
                this.dialogFormVisible = true
                this.$nextTick(() => {
                    this.$refs['dataForm'].clearValidate()
                })
            },
            createData() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        postAction('/api/sdt-flow/flowable/model/save', this.form).then((res) => {
                            this.dialogFormVisible = false
                            //debugger
                            Message.success(res.data.msg)
                            this.list()
                        })
                    }
                })
            },
            btnUpdate(row) {
                this.temp = this.form = Object.assign({}, row)
                this.dialogStatus = 'update'
                this.dialogFormVisible = true
                this.$nextTick(() => {
                    this.$refs['dataForm'].clearValidate()
                })
            },
            btnUpdateModel(row) {
                this.$router.push({path: '/flowableModelEdit', query: {id: row.id}})
            },
            updateData() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        putAction('/api/sdt-flow/flowable/model/update', this.form).then((res) => {
                            this.dialogFormVisible = false
                            Message.success(res.data.msg)
                            this.list()
                        })
                    }
                })
            },
            btnDelete(id) {
                let ids = id ? [id] : this.selectedRecords.map(record => {
                    return record.id
                })
                if (ids.length == 0) {
                    Message.error('请选择要删除的记录')
                    return
                }
                this.$confirm('此操作将删除选中的数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteAction('/api/sdt-flow/flowable/model/delete', {ids: ids.toString()}).then((res) => {
                        Message.success(res.data.msg)
                        this.list()
                    })
                }).catch(() => {
                            
                });
                
            },
            btnDeploy(id){
                postAction('/api/sdt-flow/flowable/model/deploy', {id}).then((res) => {
                    Message.success(res.data.msg)
                    this.list()
                })
            },
            selectionChange(selectedRecords) {
                this.selectedRecords = selectedRecords
            },
            catalogTreeSelect(node){
                this.listQuery.modelCategory = node.id
                this.curCategory = node.id
                this.list()
            },
            handleCheckChange(data, checked, node) {
                 debugger
            }
        }
    }
</script>
